import Konva from 'konva';
import {ref} from "vue";
import {v4 as uuidv4} from 'uuid'

var stage = null; // konva 舞台
var layerFloor = new Konva.Layer(); // 背景层 绘制网格
var groupFloor = new Konva.Group(); // 背景层的组
// var layerscale = new Konva.Layer(); // 刻度层

const SCALE_BY = 1.1; // 缩放倍数
// 设置内容层
var layerMain = new Konva.Layer();


// 初始化
const init = (konva)=>{
    stage = konva;
    stage.add(layerFloor);
    stage.add(layerMain);
    konvaWheel();
    setFloorLayer();
    setLayerMain();
    konvaClickEvent();

};

// 相对大小（基于 stage，且无视 scale）
const toStageValue= (boardPos)=> {
    return boardPos / stage.scaleX()
};
// 获取 stage 状态
const getStageState= ()=> {
    return {
        width: stage.width(),
        height: stage.height(),
        scale: stage.scaleX(),
        x: stage.x(),
        y: stage.y()
    }
};
// 获取当前鼠标的舞台坐标‌
const getPointerPosition =()=>{
    return stage.getPointerPosition()
};

// 放大缩小
const konvaWheel =()=>{
    stage.on("wheel", (e) => {
        e.evt.preventDefault(); // 阻止默认的页面滚动
        if (!stage) return; // 如果 stage 没有初始化，则退出

        // 获取当前舞台的缩放比例
        const oldScale = stage.scaleX();

        // 获取鼠标指针在舞台坐标系内的位置
        const pointer = getPointerPosition();
        if (!pointer) return; // 如果鼠标位置无效，退出

        // 计算当前鼠标点在缩放前的相对位置
        const mousePointTo = {
            x: (pointer.x - stage.x()) / oldScale,
            y: (pointer.y - stage.y()) / oldScale,
        };

        // 判断滚轮方向：deltaY > 0 表示缩小，< 0 表示放大
        let direction = e.evt.deltaY > 0 ? -1 : 1;

        // 支持 ctrl 键反转缩放方向（可选功能）
        if (e.evt.ctrlKey) {
            direction = -direction;
        }
        // 根据滚轮方向计算新的缩放比例
        const newScale = direction > 0 ? oldScale * SCALE_BY : oldScale / SCALE_BY;
        // 更新舞台的缩放比例
        stage.scale({ x: newScale, y: newScale });

        // 计算缩放后舞台新的位置，以保持鼠标相对位置不变
        const newPos = {
            x: pointer.x - mousePointTo.x * newScale,
            y: pointer.y - mousePointTo.y * newScale,
        };
        // 设置舞台的新位置
        stage.position(newPos);
        // 使用 batchDraw 来优化更新频率
        stage.batchDraw();
        setFloorLayer()
    });
};

// 鼠标事件参数
var showMousedownRight = false; // 判断是不是鼠标右键点击
var mousedownPosition = {};
var mousedownPointerPosition = {};
var previousShape;
// 设置鼠标事件
const konvaClickEvent = ()=>{
    stage.on("mousedown", (e) => {
        console.log('鼠标点击')
        // 判断是不是鼠标右键
        if(e.evt.button == '2'){
            showMousedownRight = true;
            mousedownPosition = {
                x: stage.x(),
                y: stage.y()
            };
            const pos = stage.getPointerPosition();
            if (pos) {
                mousedownPointerPosition = {
                    x: pos.x,
                    y: pos.y
                }
            }
            document.body.style.cursor = 'pointer'
        }
    });
    stage.on("mouseup", (e) => {
        showMousedownRight = false;
        document.body.style.cursor = 'default'

    });
    stage.on("mousemove", (e) => {
        // console.log('鼠标移动事件');
        if (showMousedownRight) {
            // 鼠标右键拖动
            const pos = stage.getPointerPosition();
            if (pos) {
                const offsetX = pos.x - mousedownPointerPosition.x
                const offsetY = pos.y - mousedownPointerPosition.y
                stage.position({
                    x: mousedownPosition.x + offsetX,
                    y: mousedownPosition.y + offsetY
                });
                setFloorLayer();
            }
        }
    });

    // 鼠标点击事件
    stage.on('click', function(e) {
        // console.log(e)
        // 如果这里点的是stage 取消所有事件
        if (e.target.attrs.id === "stageId") {
            if(stage.find('Transformer').length > 0){
                stage.find('Transformer')[0].destroy();
            }
            layerMain.draw();
            return;
        }
        // 防止同时操作多个节点
        if(stage.find('Transformer').length > 0){
            stage.find('Transformer')[0].destroy();
            layerMain.draw();
        }
        // 创建Transformer事件  可用于调整节点尺寸和旋转节点
        var tr = new Konva.Transformer();
        layerMain.add(tr);
        tr.attachTo(e.target);
        layerMain.draw();
    });

};
// 设置网格背景层
const setFloorLayer = ()=>{
    // 重置组
    groupFloor.destroy();
    layerFloor.imageSmoothingEnabled(false);
    // 格子大小
    const cellSize = 20;

    const width = stage.width();
    const height = stage.height();
    const scaleX = stage.scaleX() ? stage.scaleX() : 0;
    const scaleY = stage.scaleY() ? stage.scaleY() : 0;
    const stageX = stage.x() ? stage.x() : 0;
    const stageY = stage.y() ? stage.y() : 0;

    // 列数
    const lenX = Math.ceil(width / scaleX / cellSize);
    // 行数
    const lenY = Math.ceil(height / scaleY / cellSize);

    const startX = -Math.ceil(stageX / scaleX / cellSize);
    const startY = -Math.ceil(stageY / scaleY / cellSize);

    for(let x = startX; x < lenX + startX + 1; x++){
        groupFloor.add(
            new Konva.Line({
                points:[cellSize * x, -stageY / scaleY,cellSize * x, (height - stageY) / scaleY],
                stroke: '#ddd',
                strokeWidth: 1 / scaleY,
                listening: false
            })
        )
    }
    for(let y = startY; y < lenY + startY + 1; y++){
        groupFloor.add(
            new Konva.Line({
                points:[-stageX / scaleX, cellSize * y,(width - stageX) / scaleX, cellSize * y],
                stroke: '#ddd',
                strokeWidth: 1 / scaleX,
                listening: false
            })
        )
    }
    layerFloor.add(groupFloor)
};

// 设置内容层
const setLayerMain = ()=>{

};
// 生成图片
const drawImg =(e,url)=>{
    Konva.Image.fromURL(url, (image)=> {
        stage.setPointersPositions(e);
        const pos = getPointerPosition();
        const stageState = getStageState();
        const group = new Konva.Group({
            width: image.width(),
            height: image.height(),
            draggable: true // 拖拽
        });
        layerMain.add(group);
        image.setAttrs({
            x: 0,
            y: 0
        });
        group.add(image);
        const x = toStageValue(pos.x - stageState.x) - group.width() / 2;
        const y = toStageValue(pos.y - stageState.y) - group.height() / 2;
        group.setAttrs({
            id:uuidv4(),
            x,
            y
        });
        // 使用 batchDraw 来优化更新频率
        stage.batchDraw();
    });
};



export default {
    init,
    drawImg
}
